<template>
  <div class="article-detail">
    <el-button class="back-button" type="primary" icon="ArrowLeft" @click="goBack">返回上一页</el-button>

    <h1 class="title">{{ article.title }}</h1>

    <div class="meta">
      <span>作者：{{ article.author }}</span>
      <span>发布时间：{{ article.create_at }}</span>
    </div>

    <!-- 标签展示 -->
    <div class="tag-list" v-if="article.tags.length">
      <el-tag
        v-for="tag in article.tags"
        :key="tag.id"
        type="success"
        size="small"
        class="tag-item"
      >
        {{ tag.name }}
      </el-tag>
    </div>

    <!-- 正文 -->
    <v-md-preview :text="article.content" class="markdown-content" />
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getArticleDetail } from '@/api/article'
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import VuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/style/preview.css'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
import Prism from 'prismjs'

VMdPreview.use(VuepressTheme, { Prism })

interface Tag {
  id: number
  name: string
}

const route = useRoute()
const router = useRouter()

const article = ref({
  title: '',
  author: '',
  create_at: '',
  content: '',
  tags: [] as Tag[]
})

onMounted(() => {
  const id = Number(route.params.id)
  if (!id || isNaN(id)) {
    article.value.title = '文章 ID 无效'
    article.value.content = '无法加载文章内容'
    return
  }

  loadArticle(id)
})

async function loadArticle(id: number) {
  try {
    const res = await getArticleDetail(id)
    if (res.code === 0 && res.data) {
      article.value = {
        title: res.data.title,
        author: res.data.author,
        create_at: res.data.create_at || '',
        content: res.data.content,
        tags: res.data.tags || []
      }
    } else {
      article.value.title = '文章不存在'
      article.value.content = res.message || '加载失败'
    }
  } catch {
    article.value.title = '文章加载错误'
    article.value.content = '请求接口失败'
  }
}

function goBack() {
  const from = route.query.from as string
  if (from) {
    router.push(from)
  } else {
    router.back()
  }
}
</script>

<style scoped>
.floating-back-button {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 1000;
  background-color: #409EFF;
  color: #fff;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-detail {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}
.back-button {
  margin-bottom: 24px;
}
.title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 12px;
}
.meta {
  color: #888;
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  gap: 24px;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.tag-item {
  margin-right: 4px;
}
.markdown-content {
  line-height: 1.8;
  font-size: 16px;
}
</style>
